<template>
    <view class="pos-rel page">
        <view class="flex tab text-center font-color-555 align-center font-size-16 font-600 bac-color-fff">
            <navigator url="/pages/score/order" 
                hover-class="none"
                open-type="navigate" class="flex-1 flex align-center justify-center border-r-f2">
                <text class="iconfont icon-record font-size-16 font-color-price"></text>
                <text class="mar-l-5 font-size-15">兑换记录</text>
            </navigator>
            <navigator url="/pages/score/rule" 
                hover-class="none"
                open-type="navigate" class="flex-1 flex align-center justify-center">
                <text class="iconfont icon-rule font-size-16 font-color-normal"></text>
                <text class="mar-l-5 font-size-15">积分规格</text>
            </navigator>
        </view>
        <clear-line :height="10" :bacColor="'#F4F5FA'"></clear-line>
        <view class="font-size-16 container pad-t-10 pad-b-10 border-b-1 bac-color-fff" >
            积分专区
        </view>
        <view class="goods-list bac-color-fa">
            <navigator :url="'/pages/score/goods?id='+item.id" 
                hover-class="none"
                open-type="navigate" 
                v-for="(item,index) in list" :key="index"
                class="goods-item mar-t-10 box-shadow">
                <image :src="item.images[0]"  mode="widthFix" class="goods-image w-100"></image>
                <view class="info pad-10">
                    <view class="flex align-center justify-between font-size-15 font-color-555">
						<text>{{item.name}}</text>
						<view class="flex align-center font-color-price font-bold font-size-14 mar-l-3">
							<image style="width: 32rpx;height: 32rpx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/eb4cf218-061a-4016-adc6-c583bc3280b0.png"></image>
						    <text class="mar-l-3">{{item.score_price}}</text>
						</view>
					</view>
                    <view class="flex mar-t-5">
                         <progress class="flex-1" 
                         :percent="Math.ceil(parseInt(item.sale_num)/parseInt(item.stock_num)*100)" 
                          active stroke-width="8" :border-radius="20" activeColor="#F83F20 " />
                        <view class="mar-l-3 font-color-888 font-size-13">已兑换{{Math.ceil(parseInt(item.sale_num)/parseInt(item.stock_num)*100)}}%</view>
                    </view>
                </view>
            </navigator>
        </view>
        
    </view>
</template>

<script>
import {recommendGoods,scoreGoods,getUserInfo} from '@/utils/http'

export default {


    data(){
        return {
            recommendInfo:'',
            tab_list:[
                {name:'全部'},
                {
                    name:'积分',
                    list:[
                        {name:'0-100'},
                        {name:'100-500'},
                        {name:'500-1000'},
                        {name:'1000-3000'},
                    ]
                },
            ],
            current_tab:0,
            second_tab:0,
            list:[],
            index_page:0,
            total_page:1,
            user_info:''
        }
    },
    methods:{
        init(){
            this.list = [];
            this.index_page = 0;
            this.total_page = 1;
        },
        changeTab(i){
            if(this.current_tab !=i){
                this.current_tab = i
                this.second_tab = 0;
                this.init()
                this.scoreGoods();
            }
        },
        changeSecond(index){
            this.second_tab = index
            this.init()
            this.scoreGoods();
        },
        recommendGoods(){
            recommendGoods().then(res=>{
                if(res){
                    this.recommendInfo = res;
                }
            })
        },
        scoreGoods(){
            let region_num = '';
             if(this.tab_list[this.current_tab].list){
                region_num = this.tab_list[this.current_tab].list[this.second_tab].name;
             }
            scoreGoods({page:this.index_page + 1,region_num:region_num}).then(res=>{
                if(res){
                    this.index_page = res.current_page
                    this.total_page = res.last_page
                    this.list = [...this.list,...res.data];
                }
            })
        }
    },
    //下拉刷新
	onPullDownRefresh() {
        this.init()
		// this.getCate()
		this.scoreGoods()
	},
	//上拉加载
	onReachBottom() {
		if (this.index_page < this.total_page) {
			this.scoreGoods()
		}
	},
    onLoad(){
        this.recommendGoods();
        this.scoreGoods();
    },
    
    onShow(){
        //获取用户信息
        getUserInfo().then(res=>{
            if(res){
                this.user_info = res
                uni.setStorageSync('user_info', res)
                this.store.commit('fn_set_user_info',res)
            }
        })
    }
}
</script>

<style scoped>
page{
    background-color: #fafafa;

}
.tab{
    padding: 15px 10px;
}

.goods-list{
    box-sizing: border-box;
    width: 100%;
	padding: 40rpx;
}
.goods-list .goods-item{
    width: 100%;
    background-color: #fff;
	border-radius: 12rpx;
}

</style>